import React, { useState } from 'react';
import { Button, Modal, Form, Tabs, Progress, Tooltip } from 'antd';
import { CheckCircleOutlined, CloseCircleOutlined, CloseOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import type { TabsProps } from 'antd';
import { deleteUploadprogress } from '@/client/api/smartTable';
import { useRequest } from 'ahooks';
import Image from 'next/image';

const ImportProgress: React.FC<{
    open: boolean,
    cancel: () => void,
    progressData: Object[],
    onUpdateProgress?: (data: Object[]) => void
}> = ({ open, cancel, progressData, onUpdateProgress }) => {
    const [disabled, setDisabled] = useState(true);
    const [form] = Form.useForm();
    const [importType, setImportType] = useState('1');
    const [progressType, setProgressType] = useState('1');
    const [importDataList, setImportDataList] = useState([
        { dataType: '1', dataName: 'user', importStatus: '2', size: '2.89KB', schedule: 30 },
        { dataType: '2', dataName: '考勤表', importStatus: '2', size: '2.89KB', schedule: 50 },
        { dataType: '1', dataName: 'user', importStatus: '1', size: '2.89KB' },
        { dataType: '1', dataName: 'user', importStatus: '0', size: '2.89KB' },
        { dataType: '2', dataName: '采购表', importStatus: '3', size: '2.89KB' },
        { dataType: '2', dataName: '人员进出表', importStatus: '4', size: '2.89KB' }
    ]);
    const [downloadData, setDownloadData] = useState([
        { dataType: '2', dataName: '考勤表', importStatus: '2', size: '2.89KB', schedule: 50 },
        { dataType: '2', dataName: '采购表', importStatus: '1', size: '2.89KB' },
        { dataType: '2', dataName: '人员进出表', importStatus: '0', size: '2.89KB' }
    ]);

    const handleCancel = () => {
        cancel();
    };

    type FieldType = {
        dataSource?: string;
        dataTable?: string;
        filterCondition?: string;
    };

    const dataSource = [{ id: 1, name: 'male' }, { id: 2, name: 'female' }];
    const dataTable = [{ id: 1, name: 'user' }, { id: 2, name: 'shop' }];

    const onChange = (key: string) => {
        console.log('key', key);
        setProgressType(key);
    };

    const items: TabsProps['items'] = [
        {
            key: '1',
            label: '导入',
        },
        // {
        //     key: '2',
        //     label: '下载',
        // }
    ];

    // 处理删除上传进度的请求
    const { run: handleDeleteUploadprogress, loading } = useRequest(
        async () => {
            return await deleteUploadprogress();
        },
        {
            manual: true,
            onSuccess: (res: any) => {
                const { data, success } = res.data || {};
                console.log('data', data, success)
                if (success) {
                    onUpdateProgress && onUpdateProgress([]);
                }
            },
            onError: (error) => {
                console.error('删除失败:', error);
            }
        }
    );

    return (
        <div>
            <Modal
                wrapClassName="my-custom-modal"
                title={
                    <div
                        style={{ width: '100%', cursor: 'move' }}
                        onMouseOver={() => {
                            if (disabled) {
                                setDisabled(false);
                            }
                        }}
                        onMouseOut={() => {
                            setDisabled(true);
                        }}
                        onFocus={() => { }}
                        onBlur={() => { }}
                    >
                        <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
                    </div>
                }
                open={open}
                footer={null}
                closeIcon={
                    <div className="flex items-center">
                        <Button
                            type="link"
                            size="small"
                            icon={<img src='/chat-excel/clearRecords.png' style={{ width: '14px' }} />}
                            className="mr-1"
                            onClick={handleDeleteUploadprogress}
                            loading={loading} // 添加加载状态
                            style={{ padding: 0 }}
                        />
                        <Button
                            type="link"
                            size="small"
                            icon={<CloseOutlined />}
                            onClick={handleCancel}
                            style={{ padding: 0, marginRight: '20px' }}
                        />
                    </div>
                }
            >
                <div className="max-h-[200px] overflow-y-auto">
                    {progressType === '1' && (
                        progressData.map((item) => (
                            <div className="flex items-center mb-2 " key={item.file_id || item.file_name}>
                                {item.file_type !== 0 && (
                                    <Image src={`/icons/app/dataTable.png`} width={40} height={40} alt='' style={{ marginRight: '10px' }} />
                                )}
                                {item.file_type === 0 && (
                                    <Image src={`/ai/chat_excel_analyze.png`} width={46} height={46} alt='file-icon' preview={false} />
                                )}
                                <div style={{ width: '100%' }} className="flex flex-col justify-center">
                                    <div>{item.file_name}</div>
                                    <div className="flex justify-between">
                                        <span className="mr-1 text-[#666]">{item.file_size_fm}</span>
                                        {item.status === 2 && (
                                            <Progress percent={item.progress} showInfo={false} style={{ maxWidth: '86%' }} />
                                        )}
                                        {item.status !== 2 && (
                                            <div>
                                                <span>
                                                    {item.status === 1
                                                        ? '导入成功' : '导入失败'
                                                    }
                                                </span>
                                                <span>{item.status === 0 && (<><Tooltip title={item.fail_reason}>
                                                    <span><QuestionCircleOutlined style={{ marginLeft: '5px', cursor: 'pointer' }} /></span>
                                                </Tooltip></>)}</span>
                                                {item.status === 1 && (
                                                    <CheckCircleOutlined style={{ color: '#52c41a', marginLeft: '10px' }} />
                                                )}
                                                {item.status === 0 && (
                                                    <CloseCircleOutlined style={{ color: "#ff0000", marginLeft: '10px' }} />
                                                )}
                                            </div>
                                        )}
                                    </div>
                                </div>
                            </div>
                        ))
                    )}
                    {progressType === '2' && (
                        downloadData.map((item) => (
                            <div className="flex items-center mb-2" key={item.dataName}>
                                {item.dataType === '1' && (
                                    <Image src={`/icons/app/dataTable.png`} width={40} height={40} alt='' style={{ marginRight: '10px' }} />
                                )}
                                {item.dataType === '2' && (
                                    <Image src={`/ai/chat_excel_analyze.png`} width={46} height={46} alt='file-icon' preview={false} className='mr-1' />
                                )}
                                <div style={{ width: '100%' }} className="flex flex-col justify-center">
                                    <div>{item.dataName}</div>
                                    <div className="flex justify-between">
                                        <span className="mr-1 text-[#666]">{item.file_size_fm}</span>
                                        {item.importStatus === '2' && (
                                            <Progress percent={item.schedule} showInfo={false} />
                                        )}
                                        {item.importStatus !== '2' && (
                                            <div>
                                                <span>{item.importStatus === '1' ? '已下载至本地' : '下载失败'}</span>
                                                {item.importStatus === '1' && (
                                                    <CheckCircleOutlined style={{ color: '#52c41a', marginLeft: '10px' }} />
                                                )}
                                                {item.importStatus === '0' && (
                                                    <CloseCircleOutlined style={{ color: "#ff0000", marginLeft: '10px' }} />
                                                )}
                                            </div>
                                        )}
                                    </div>
                                </div>
                            </div>
                        ))
                    )}
                </div>
            </Modal>
            <style jsx global>{`
        .my-custom-modal .ant-modal-close:hover {
          background-color: transparent !important;
          box-shadow: none !important;
        }
      `}</style>
        </div>
    );
}

export default ImportProgress;